<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="1000px">
    <el-form :model="form" label-width="auto">
      <el-form-item label="部门名称">
        <el-input v-model="form.department_Name" style="width: 200px;" placeholder="请输入角色名" />
      </el-form-item>

      <el-form-item label="上级部门">
        <el-input v-model="form.parent_Department" style="width: 200px;" placeholder="请输入备注" />
      </el-form-item>

      <el-form-item>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="AddOppen()">新增</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="部门名称">
      <el-input v-model="formInline.username" placeholder="请输入角色名" clearable />
    </el-form-item>

    <el-form-item label="备注">
      <el-input v-model="formInline.number" placeholder="请输入备注" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="Show()" style="width: 100px;">查询</el-button>
    </el-form-item>
  </el-form>

  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="Open1()">新增</el-button>
      <el-button type="primary" @click="">编辑</el-button>
      <el-button type="primary" @click="DeleteAll()">删除</el-button>
      <el-button type="primary" @click="Show()">刷新</el-button>
      <el-button type="primary" @click="OppenExports()">导出</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column prop="id" label="序号" width="auto">
      <template v-slot="scope">
        <el-checkbox-group v-model="addIds">
          <el-checkbox :value="scope.row.department_Id">{{ scope.row.department_Id }}</el-checkbox>
        </el-checkbox-group>
      </template>
    </el-table-column>

    <el-table-column prop="department_Name" label="部门名称" width="auto" />
    <el-table-column prop="parent_Department" label="上级部门" width="auto" />
    <el-table-column prop="createTime" label="创建时间" width="auto" />
    <el-table-column label="操作" width="auto">
      <template v-slot="scoped">
        <el-button type="text" @click="Edit(scoped.row.department_Id)">编辑</el-button>
        <el-button type="text" @click="Delete(scoped.row.department_Id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="table-footer">
    <div class="batch-actions">
      <el-button size="small" @click="selectAll()">全选</el-button>
      <el-button size="small" @click="reverseSelect()">反选</el-button>
      <el-select size="small" placeholder="批量操作" style="width: 120px;">
        <el-option label="批量删除" value="delete" @click="DeleteAll()" />
        <el-option label="批量导出" value="export" @click="OppenExportsAll()" />
      </el-select>
    </div>
  </div>
</template>
<script lang="ts" setup>


import { http } from '@/axios/axiosHelpers'
import { systeamread } from '@/systeamaxios/sysaxiosHelpers';
import axios from 'axios';

import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
const addIds = ref<any>([])
const dialogVisible = ref(false)
const LogExport = ref(false)
const bt = reactive({
  bid: 0,
  bname: ""
})
//表格加入
const form = reactive({
  "department_Name": "",
  "parent_Department": "",
  "createTime": "",
  "department_IsDel": false
})//表格查询
const formInline = reactive({
  username: '',
  number: ''
})//表格
const tableData = ref([{
  "department_Id": 0,
  "department_Name": "",
  "parent_Department": "",
  "createTime": "",
  "department_IsDel": false
}])
const Open1 = () => {
  dialogVisible.value = true
  bt.bname = "添加"
}
const OppenExports = () => {
  LogExport.value = true
}
onMounted(() => {
  Show()
})
//新增
const AddOppen = () => {
  // http.post("/managementsysteamreadapis/api/DepartMentAll/AddDepartMentes", form)
  systeamread.post("/api/DepartMentAll/AddDepartMentes", form)
    .then(res => {
      if (res.data.code > 0) {
        ElMessage.success(res.data.message)
        dialogVisible.value = false
        Show()
      }
      else {
        ElMessage.success(res.data.message)
      }
    })
}
//显示信息
const Show = () => {
  // http.get("/managementsysteamreadapis/api/DepartMentAll/ShowDepartMent", {
  systeamread.get("/api/DepartMentAll/ShowDepartMent", {
    params: {
      Department_Name: formInline.username,
      Parent_Department: formInline.number
    }
  })
    .then(res => {
      tableData.value = res.data.data
      addIds.value = []
    })
}

//保存选中的id
const handleSelectionChange = (selection: any[]) => {
  addIds.value = selection.map(item => item.rabit_Id)
}
//全部选中id
const selectAll = () => {
  addIds.value = tableData.value.map(item => item.department_Id)
}
//反选
const reverseSelect = () => {
  addIds.value = tableData.value.filter(item => !addIds.value.includes(item.department_Id)).map(item => item.department_Id)
}

const OppenExportsAll = () => {
  // let url ="http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/DepartmentAll?Ids=" + addIds.value.toString();
  let url ="http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/DepartmentAll?Ids=" + addIds.value.toString();
  window.location.href = url
  addIds.value = []
}
const DeleteAll=()=>{
  
}
const Edit = (id: number) => {
  dialogVisible.value = true
  bt.bid = id
  bt.bname = "编辑"
}

const Delete = (id: number) => {

  http.delete("/managementsysteamreadapis/api/DepartMentAll/DelDepartMent", {
    params: {
      DepartMent_Id: id
    }
  })
    .then(res => {
      ElMessage.success(res.data.message)
    })
}
</script>